<template>
  <el-cascader
    v-model="newRegion"
    :options="regionList"
    expand-trigger="hover"
    :props="fileds"
    @active-item-change="addressChange"
    @change="onchange"
  />
</template>
<script>
import { listRegionByPid } from '@/api/region'
export default {
  name: 'Region',
  props: ['value', 'names'],
  data() {
    return {
      regionList: [],
      fileds: { value: 'code', label: 'name', children: 'cities' },
      newRegion: [],
      cityList: [],
      areaList: []
    }
  },
  watch: {
    value() {
      this.newRegion = this.value
      this.addressChange(this.value)
    }
  },
  created() {
    this.getRegionList(0)
    this.addressChange(this.value)
  },
  mounted() {
    this.getRegionList(0)
    this.addressChange(this.value)
  },
  methods: {
    onchange() {
      this.$emit('input', this.newRegion)
      this.newRegionName = []
      var obj = this.regionList.filter(x => x.code === this.newRegion[0])
      if (obj.length > 0) {
        this.newRegionName.push(obj[0].name)
      }
      obj = this.cityList.filter(x => x.code === this.newRegion[1])
      if (obj.length > 0) {
        this.newRegionName.push(obj[0].name)
      }
      obj = this.areaList.filter(x => x.code === this.newRegion[2])
      if (obj.length > 0) {
        this.newRegionName.push(obj[0].name)
      }
      this.$emit('update:names', this.newRegionName)
    },
    addressChange(val) {
      if (val === undefined) return
      const page = this
      if (val.length === 1) {
        if (val[0] === undefined) return
        listRegionByPid({ pid: val[0] }).then(res => {
          var temp = []
          for (var i = 0; i < res.data.data.length; i++) {
            temp.push({
              code: res.data.data[i].code,
              name: res.data.data[i].name,
              cities: []
            })
          }
          this.cityList = temp
          this.regionList.forEach(function(r, index) {
            if (r.code === val[0]) {
              page.regionList[index].cities = temp
            }
          })
        })
      } else if (val.length === 2) {
        if (val[1] === undefined) return
        listRegionByPid({ pid: val[1] }).then(res => {
          var temp = []
          for (var i = 0; i < res.data.data.length; i++) {
            temp.push({
              code: res.data.data[i].code,
              name: res.data.data[i].name
            })
          }
          if (temp.length === 0) {
            temp.push({ code: 0, name: '市辖区' })
          }
          this.areaList = temp
          this.regionList.forEach(function(r0, i0) {
            if (r0.code === val[0]) {
              page.regionList[i0].cities.forEach(function(r1, i1) {
                if (r1.code === val[1]) {
                  page.regionList[i0].cities[i1].cities = temp
                }
              })
            }
          })
        })
      } else if (val.length === 3) {
        if (val[0] === undefined) return
        listRegionByPid({ pid: val[0] }).then(res => {
          var temp = []
          for (var i = 0; i < res.data.data.length; i++) {
            temp.push({
              code: res.data.data[i].code,
              name: res.data.data[i].name,
              cities: []
            })
          }
          this.cityList = temp
          this.regionList.forEach(function(r, index) {
            if (r.code === val[0]) {
              page.regionList[index].cities = temp
            }
          })
          if (val[1] === undefined) return
          listRegionByPid({ pid: val[1] }).then(res => {
            var temp = []
            for (var i = 0; i < res.data.data.length; i++) {
              temp.push({
                code: res.data.data[i].code,
                name: res.data.data[i].name
              })
            }
            if (temp.length === 0) {
              temp.push({ code: 0, name: '市辖区' })
            }
            this.areaList = temp
            this.regionList.forEach(function(r0, i0) {
              if (r0.code === val[0]) {
                page.regionList[i0].cities.forEach(function(r1, i1) {
                  if (r1.code === val[1]) {
                    page.regionList[i0].cities[i1].cities = temp
                  }
                })
              }
            })
          })
        })
        this.newRegion = val
      }
    },
    getRegionList(pid) {
      var self = this
      listRegionByPid({ pid: pid }).then(res => {
        for (var i = 0; i < res.data.data.length; i++) {
          self.regionList.push({
            code: res.data.data[i].code,
            name: res.data.data[i].name,
            cities: []
          })
        }
      })
    }
  }
}
</script>

